<template>
	<view>
		<mescroll-body top='0' @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption"
			:down="downOption" :bottombar="false">
			<view style="background-color: #F44A42;height: 320rpx; ">
				<!-- 个人信息 -->
				<view class="align-center justify-between" style="padding-top: 50rpx;">
					<view class="align-center pl15">
						<view>
							<image class="radius50" :src="userInfo.avatar" style="width: 100rpx;height: 100rpx;">
							</image>
						</view>
						<view class="ml15">
							<view class="align-center">
								<view style="height: 90rpx;" class="ft18 bold white mr10 clamp2"
									:style="{maxWidth:(lang=='en')?'280rpx':'330rpx'}">
									<text>{{userInfo.nickname}}</text>
								</view>
								<!-- 如果是会员/plus会员，显示等级 12-->
								<view v-if="userInfo.level<3">
									<image :src="'../../static/images/icon/vip'+userInfo.level+lang+'.png'"
										mode="heightFix" class="block" style="height: 40rpx;"></image>
								</view>
								<!-- 是运营商会员/运营商plus会员，显示星级 34 -->
								<view class="" v-if="userInfo.level>2">
									<image :src="'../../static/images/icon/'+(userInfo.star-1)+lang+'x.png'"
										mode="heightFix" class="block" style="height: 40rpx;"></image>
								</view>
							</view>
							<view class="align-center ft12 white mt5">
								<view class="borwhite0">
									<image src="../../static/images/index/liwu.png" style="width: 20rpx;height: 20rpx;">
									</image>
									<text class="ml5">{{$t('index').我的邀请码}}: {{userInfo.invite_code || '--'}}</text>
								</view>
								<view class="borwhite1" @click="copy(userInfo.invite_code)">
									<text>{{$t('index').复制}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="byuan ft12 white tc" @click="supeInfoAPI()">
						<text>{{$t('index').我的导师}}</text>
					</view>
				</view>
			</view>
			<view class="posRelative" style="top: -110rpx;">
				<!-- 今日任务  -->
				<view class=" plr12 " v-if="userInfo.level<3">
					<view class="bgWhite radius8 ptb15 plr15">
						<view class="ft15 bold "><text>{{$t('index').今日任务}}</text></view>
						<view class="justify-between align-center pt15">
							<view class="align-center">
								<image src="../../static/images/index/gongwnebao.png" mode="aspectFill"
									style="width: 72rpx;height: 72rpx;"></image>
								<view class="ft14 bold ml10"><text>{{$t('index').升级成为运营商}}</text></view>
							</view>
							<view class="white bglight tc plr5" @click="upgradation()"
								style="line-height: 60rpx;border-radius: 33rpx;min-width: 144rpx;">
								<text>{{$t('index').去升级}}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 收益管理 -->
				<view class=" plr12 mt12">
					<view class="bgWhite radius8 ptb15 plr15">
						<view class="justify-between align-center pb15">
							<view class="ft15 bold"><text>{{$t('index').收益管理}}</text></view>
							<view class="align-center" @click="navTo('/pages/index/income/income')">
								<text class="ft12 gray6 mr5">{{$t('index').查看收益}}</text>
								<image src="../../static/images/index/right.png" style="width: 10rpx;height: 18rpx;">
								</image>
							</view>
						</view>
						<view class=" align-center">
							<view class="flex-col align-center flex1 tc">
								<view class="ft20 bold "><text>{{nowInfo.day_estimate |changeCurrency}}</text></view>
								<view class="ft12 gray6 mt5">
									<text>{{$t('index').今日预估}}({{Currency=='CNY'?$t('index').元:$t('index').美元}})</text>
								</view>
							</view>
							<view class="flex-col align-center flex1 tc">
								<view class="ft20 bold "><text>{{nowInfo.moon_estimate |changeCurrency}}</text></view>
								<view class="ft12 gray6 mt5">
									<text>{{$t('index').本月预估}}({{Currency=='CNY'?$t('index').元:$t('index').美元}})</text>
								</view>
							</view>
							<view class="flex-col align-center flex1 tc">
								<view class="ft20 bold "><text>{{nowInfo.moon_sell |changeCurrency}}</text></view>
								<view class="ft12 gray6 mt5">
									<text>{{$t('index').本月已结算}}({{Currency=='CNY'?$t('index').元:$t('index').美元}})</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!--资源位 -->
				<view class="plr12 mt12" v-if="bannerList.length>0">
					<!-- <image src="../../static/images/index/zijin.png" style="width: 702rpx;height: 180rpx;"></image> -->
					<!-- circular indicator-dots  indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#ffffff" -->
					<view class="bannerBox overhide" style="height: 180upx;">
						<swiper class="swiper" autoplay="true" circular="true" interval="3000" duration="500"
							style="height: 180upx;">
							<swiper-item v-for="(item,index) in bannerList" :key="index"
								@click="navTo(`/pages/index/resposDetail?id=${item.id}`)">
								<image :src="item.cover" mode="aspectFill" class="w100 radius8" style="height: 180upx;">
								</image>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<!-- 本月考核 -->
				<view class=" plr12 mt12" v-if="fansLists || homneLists">
					<view class="bgWhite radius8 ptb15 plr15" v-if="fansLists.length>0 || homneLists.length>0">
						<view class="justify-between align-center pb15">
							<view class="ft15 bold"><text>{{$t('index').本月考核}}</text></view>
							<view class="align-center" @click="navTo('/pages/index/examine/examine')">
								<text class="ft12 gray6 mr5">{{$t('index').查看详情}}</text>
								<image src="../../static/images/index/right.png" style="width: 10rpx;height: 18rpx;">
								</image>
							</view>
						</view>
						<view v-if="fansLists.length>0" class="justify-between align-center">
							<view v-for="(item,index) in fansLists" :key="index">
								<view v-if="index<2" class="  ptb12 radius8 plr12"
									style="background-color:#FEFAFA ;width: 312rpx;">
									<view class="align-center pb10">
										<image class="radius50" :src="item.user.avatar"
											style="width: 40rpx;height: 40rpx;" mode="aspectFill"></image>
										<view class="ft12 gray6 ml10 clamp" style="width: 200rpx;">
											<text>{{item.user.nickname}}</text>
										</view>
									</view>
									<view class="ft20 gray3 bold">
										<text>{{parseFloat(item.f_value).toLocaleString() ||0}}</text>
									</view>
								</view>
							</view>
						</view>
						<view class="justify-between align-center" v-else>
							<view v-for="(item,index) in homneLists" :key="index">
								<view v-if="index<2" class="  ptb12 radius8 plr12"
									style="background-color:#FEFAFA ;width: 312rpx;">
									<view class="align-center pb10">
										<image class="radius50" :src="item.user.avatar"
											style="width: 40rpx;height: 40rpx;" mode="aspectFill"></image>
										<view class="ft12 gray6 ml10 clamp" style="width: 200rpx;">
											<text>{{item.user.nickname}}</text>
										</view>
									</view>
									<view class="ft20 gray3 bold">
										<text>{{item.f_value ||0}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 今日数据 -->
				<view class="plr12 mt12 ">
					<view class="bgWhite plr15 ptb15 radius8">
						<view class="ft15 bold "><text>{{$t('index').今日数据}}</text></view>
						<view class="ft12 gray6 pt15 pb5"><text>{{$t('index').新增粉丝}}</text></view>
						<view class="justify-between ">
							<view class="radius8 pl10 ptb15" style="background: #FEFAFA;width: 204rpx;height: 144rpx;">
								<view class="ft12 gray6 mb12"><text>{{$t('index').会员人}}</text></view>
								<view class="ft18 bold"><text>{{nowInfo.usercount || 0}}</text></view>
							</view>
							<view class="radius8 pl10 ptb15" style="background: #FEFAFA;width: 204rpx;height: 144rpx;">
								<view class="ft12 gray6 mb12"><text>{{$t('index').PLUS会员人}}</text></view>
								<view class="ft18 bold"><text>{{nowInfo.pulscount || 0}}</text></view>
							</view>
							<view class="radius8 pl10 ptb15" style="background: #FEFAFA;width: 204rpx;height: 144rpx;">
								<view class="ft12 gray6 mb12"><text>{{$t('index').运营商人}}</text></view>
								<view class="ft18 bold"><text>{{nowInfo.operatorpulscount || 0}}</text></view>
							</view>
						</view>
						<view class="ft12 gray6 pt15 pb5"><text>{{$t('index').交易粉丝}}</text>
						</view>
						<view class="justify-between ">
							<view class="radius8 pl10 ptb15" style="background: #FEFAFA;width: 204rpx;height: 144rpx;">
								<view class="ft12 gray6 mb12"><text>{{$t('index').成交粉丝人}}</text></view>
								<view class="ft18 bold"><text>{{nowInfo.ordercount || 0}}</text></view>
							</view>
							<view class="radius8 pl10 ptb15" style="background: #FEFAFA;width: 204rpx;height: 144rpx;">
								<view class="ft12 gray6 mb12"><text>{{$t('index').支付订单笔}}</text></view>
								<view class="ft18 bold"><text>{{nowInfo.payordercount || 0}}</text></view>
							</view>
							<view class="radius8 pl10 ptb15" style="background: #FEFAFA;width: 204rpx;height: 144rpx;">
								<view class="ft12 gray6 mb12"><text>{{$t('index').支付销售额}}</text></view>
								<view class="ft18 bold"><text>{{nowInfo.payordersell }}</text></view>
							</view>
						</view>
					</view>
				</view>
				<!-- 今日安排 -->
				<view class="plr12 mt12" v-if="userInfo.level>2">
					<view class="bgWhite plr15 radius8 ">
						<view class="ft15 bold pt15"><text>{{$t('index').今日安排}}</text></view>
						<view class="justify-between ptb15" v-for="(item,index) in nowArrange" :key="index">
							<view class="align-center">
								<image class="radius50" :src="item.icon" style="width: 72rpx;height: 72rpx;"
									mode="aspectFill"></image>
								<view class="ml10" style="max-width: 380rpx;">
									<view class="ft14 bold gray3">
										<text>{{item.num ||0}}{{$t('index')[item.title]}}</text>
									</view>
									<view class="ft12 gray9"><text>{{$t('index')[item.content]}}</text></view>
								</view>
							</view>
							<view>
								<view class="light bdlight  tc plr5"
									@click="navTo(`/pages/index/arrange/arrange?content=${item.content}&type=${item.type}`)"
									style="line-height: 60rpx;border-radius: 33rpx;min-width: 144rpx;">
									<text>{{$t('index')[item.btn]}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 本月任务 -->
				<view class="plr12 mt12" v-if="userInfo.level>2">
					<view class="bgWhite plr15 radius8 ">
						<view class="ft15 bold pt15"><text>{{$t('index').本月任务}}</text></view>
						<view class="align-center ptb15 bdbe">
							<image class="radius50" src="../../static/images/index/qianbao.png"
								style="width: 72rpx;height: 72rpx;" mode="aspectFill"></image>
							<view class="ml10 flex1" v-if="nowMtask.self_price<nowMtask.self_price_where">
								<view class="ft14 bold mb10">
									<text>{{$t('index').自购满}}{{nowMtask.self_price_where }}{{$t('index').距离达标还差}}</text><text
										class="light">{{$utils.accSub(nowMtask.self_price,nowMtask.self_price_where)}}</text><text>
										{{lang=='en'?'left':''}}</text>
								</view>
								<!-- () -->
								<u-line-progress activeColor="#F44A42"
									:percentage="nowMtask.self_price>0?nowMtask.self_price/nowMtask.self_price_where*100:0"
									height="5" :showText="false" style="width: 360rpx;"></u-line-progress>
							</view>
							<view class="ml10 flex1" v-else>
								<view class="ft14 bold mb10 ">
									<text>{{$t('index').您本月已完成满}}<text
											class="light">{{nowMtask.self_price_where }}</text>{{$t('index').已达标}}</text>
								</view>
								<!-- () -->
								<u-line-progress activeColor="#F44A42" percentage="100" height="5" :showText="false"
									style="width: 360rpx;"></u-line-progress>
							</view>
						</view>
						<view class="align-center ptb15">
							<image class="radius50" src="../../static/images/index/jinqian.png"
								style="width: 72rpx;height: 72rpx;" mode="aspectFill"></image>

							<view class="ml10 flex1" v-if="Number(nowMtask.sub_price)<Number(nowMtask.sub_price_where)">
								<view class="ft14 bold mb10">
									<text>{{$t('index').市场补贴距离下一目标}}<text
											class="light">{{nowMtask.sub_price_where | changeTH(10000)}}</text>{{$t('index').还差}}</text><text
										class="light">{{$utils.accSub(nowMtask.sub_price,nowMtask.sub_price_where) | changeTH(10000) }}</text><text>

										{{lang=='en'?'left':''}}</text>
								</view>
								<u-line-progress activeColor="#F44A42"
									:percentage="nowMtask.sub_price>0?nowMtask.sub_price/nowMtask.sub_price_where*100:0"
									height="5" :showText="false" style="width: 360rpx;"></u-line-progress>
							</view>
							<view class="ml10 flex1" v-else>
								<view class="ft14 bold mb10 "><text>{{$t('index').已达标市场补贴上限}}<text
											class="light">{{10240000 | changeTH(10000)}}</text></text></view>
								<u-line-progress activeColor="#F44A42" percentage="100" height="5" :showText="false"
									style="width: 360rpx;"></u-line-progress>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<!-- 中间弹窗 -->
		<u-popup :show="showcode" @close="close" mode="center" round="8px">
			<view class="tc bdbe align-center justify-center" style="width: 600rpx;height: 202rpx;">
				<view class="ft16 bold" style="width: 600rpx;">
					<text>{{$t('index').升级运营商请联系我的导师}}</text>
				</view>
			</view>
			<view class="tc" style="width: 600rpx;height: 80rpx;line-height: 80rpx;" @click="know()">
				<view class="ft15 light"><text>{{$t('index').我知道了}}</text></view>
			</view>
		</u-popup>
		<!-- 是否设置币种弹窗 -->
		<u-modal :showCancelButton="true" :confirmText="$t('common').确认" confirmColor="#333333" cancelColor="#333333"
			:cancelText="$t('common').取消" width="600rpx" :show="coinshow" @cancel="cancel()" @close="cancel()"
			@confirm="confirmcoin()" :title="$t('index').设置币种">
			<view class="w100">
				<view class="w100 ft16 gray3 tc">
					<text>{{$t('index').请选择您想显示的币种}}</text>
				</view>
				<view class="align-center w100 justify-around " style="margin-top: 50rpx;">
					<view class="align-center" v-for="(item,index) in coinLists" :key="index"
						@click="selectCoin(index)">
						<image v-if="selectActive==index" src="../../static/images/login/select.png" mode="aspectFill"
							style="width: 34rpx;height: 34rpx;"></image>
						<image v-else src="../../static/images/login/noselect.png" mode="aspectFill"
							style="width: 34rpx;height: 34rpx;"></image>
						<view class="ml5 ft16 gray3"><text>{{$t('set')[item.name]}}</text></view>
					</view>
				</view>
			</view>
		</u-modal>
		<!-- 我的导师 -->
		<u-popup :show="showteacher" @close="close" mode="center" round="8px">
			<view class="bdbe ptb15">
				<view class="align-center plr15 gray6">
					<view class="ft14 mr10"><text>{{$t('index').我的导师}}:</text></view>
					<view class="align-center">
						<image class="radius50 mr10" style="width: 80rpx;height: 80rpx;" :src="myteacher.avatar"
							mode="aspectFill"></image>
						<view class="ft14 " style="width: 308rpx;"><text>{{myteacher.nickname || '--'}}</text></view>
					</view>
				</view>
				<view class="plr15 gray6 ft14"><text>{{$t('index').手机号}}:{{myteacher.phone}}</text></view>
			</view>
			<view class="tc" style="width: 600rpx;height: 80rpx;line-height: 80rpx;" @click="showteacher=false">
				<view class="ft15 light"><text>{{$t('index').确定}}</text></view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				downOption: {
					auto: false
				},
				upOption: {
					auto: false,
					page: {
						num: 0,
						size: 20,
					},
					textNoMore: '已经到底了'
				},
				showcode: false,
				showteacher: false,
				coinshow: false,
				selectActive: 0,
				coinLists: [{
					name: '人民币',
					currency: 'CNY'
				}, {
					name: '美元',
					currency: 'USD'
				}],
				bannerList: [],
				nowInfo: {}, //今日数据
				nowArrange: [{ //今日安排
					icon: "../../static/images/index/one.png",
					title: '个最近加入的潜在粉丝',
					content: '近一个月内新加入的注册用户',
					btn: '邀请下单',
					num: 0,
					type: 'not_order'
				}, {
					icon: "../../static/images/index/two.png",
					title: '个PLUS即将到期的粉丝',
					content: '近一个月PLUS即将到期的粉丝',
					btn: '邀请续费',
					num: 0,
					type: 'expire_pulsvip'
				}, {
					icon: "../../static/images/index/three.png",
					title: '个意向成交的粉丝',
					content: '近3天内成功下单又取消的粉丝',
					btn: '去沟通',
					num: 0,
					type: 'order_not_cance'
				}, {
					icon: "../../static/images/index/four.png",
					title: '个PLUS权益已到期的粉丝',
					content: '近6个月PLUS权益已到期的粉丝',
					btn: '去沟通',
					num: 0,
					type: 'six_expire_pulsvip'
				}, {
					icon: "../../static/images/index/five.png",
					title: '个未升级PLUS会员的粉丝',
					content: '加入30天内未升级PLUS会员的粉丝',
					btn: '邀请升级',
					num: 0,
					type: 'not_up'
				}, {
					icon: "../../static/images/index/five.png",
					title: '个未升级运营商的粉丝',
					content: '加入30天内未升级运营商的粉丝',
					btn: '邀请升级',
					num: 0,
					type: 'not_up_operator'
				}, {
					icon: "../../static/images/index/six.png",
					title: '个最近待确认收货订单',
					content: '近7天内待确认收货的订单',
					btn: '去沟通',
					num: 0,
					type: 'seven_confirm_order'
				}, {
					icon: "../../static/images/index/seven.png",
					title: '个粉丝正在售后订单',
					content: '正在申请退款_退货的粉丝',
					btn: '去挽回',
					num: 0,
					type: 'refunding_order'
				}, {
					icon: "../../static/images/index/night.png",
					title: '个低活跃粉丝',
					content: '近3_6个月内没有下单的粉丝',
					btn: '去沟通',
					num: 0,
					type: 'six_not_order'
				}, {
					icon: "../../static/images/index/nine.png",
					title: '个不活跃粉丝',
					content: '近半年_1年内没有下单的粉丝',
					btn: '去沟通',
					num: 0,
					type: 'year_not_order'
				}, ],
				nowMtask: {}, //本月任务
				fansLists: [], //本月考核
				homneLists: [], //本月考核
				gradeinfo: {}, //本月考核
				myteacher: {}, //我的导师
				lang: ''
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			Currency() {
				return this.$store.state.currency
			},
		},
		onLoad() {

		},
		onShow() {
			this.$utils.changeFooterLang()
		},
		methods: {
			// 下拉刷新
			upCallback(page) {
d
				this.$utils.changeFooterLang()
				this.lang = uni.getStorageSync('lang').lang
			},
			copy(count) {
				console.log(count)
				uni.setClipboardData({
					data: count,
					success() {
						uni.showToast({
							title: this.$t('shop').复制成功,
							icon: 'none'
						})
					},
				})
			},

			confirmcoin() {
				this.coinshow = false
				uni.setStorageSync('currency', this.coinLists[this.selectActive].currency)
				this.$store.commit("saveCurrency", this.coinLists[this.selectActive].currency)
			},
		}
	}
</script>

<style>
	.byuan {
		width: 120rpx;
		height: 40rpx;
		background: #CC241C;
		border-radius: 100rpx 0rpx 0rpx 100rpx;
		line-height: 40rpx;
	}

	.borwhite0 {
		border: 1rpx solid #FFFFFF;
		border-radius: 21rpx 0 0 21rpx;
		padding: 0 24rpx 0 18rpx;
	}

	.borwhite1 {
		border: 1rpx solid #FFFFFF;
		border-left: none;
		border-radius: 0 21rpx 21rpx 0;
		padding: 0 18rpx;
	}
</style>